<template>
  <div>
    <!-- <ul class="search-navbar">
      <li>单曲</li>
      <li>专辑</li>
      <li>歌手</li>
      <li>歌曲</li>
    </ul> -->
    <div class="search-navbar">
      <el-menu
        mode="horizontal"
        default-active="1"
        background-color="#303133"
        active-text-color="#c20c0c"
        text-color="#fff"
      >
        <el-menu-item index="1">
          <i class="el-icon-video-play"></i>
          单曲
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-copy-document"></i>
          专辑
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-user-solid"></i>
          歌手
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-search"></i>
          歌曲
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.search-navbar {
  box-sizing: border-box;
  width: 90%;
  margin: 0 auto;
  background-color: #fff;
  border: 2px solid #ccc;
  margin-top: 5px;
}
.search-navbar li {
  box-sizing: border-box;
  display: inline-block;
  width: 25%;
  height: 39px;
  line-height: 37px;
  text-align: center;
  font-size: 14px;
  border: 2px solid #fff;
  cursor: pointer;
}
</style>